<template>
  <div class="box">
    <div class="tianjia">
      <div class="box-tianjia">编辑线索</div>
      <div class="biaodan">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="客户姓名 :" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="性别 :" prop="region">
            <el-select
              v-model="ruleForm.region"
              placeholder="请选择"
              style="width: 650px"
            >
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式 :" prop="shoujihao">
            <el-input v-model="ruleForm.shoujihao"></el-input>
          </el-form-item>
          <el-form-item label="微信号 :" prop="weixinhao">
            <el-input v-model="ruleForm.weixinhao"></el-input>
          </el-form-item>
          <el-form-item label="线索来源 :" prop="xiansuolaiyuan">
            <el-select
              v-model="ruleForm.xiansuolaiyuan"
              placeholder="请选择"
              style="width: 650px"
            >
              <el-option label="微信朋友圈" value="微信朋友圈"></el-option>
              <el-option label="微信好友" value="微信好友"></el-option>
              <el-option label="客户介绍" value="客户介绍"></el-option>
              <el-option label="线下导入" value="线下导入"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="线索状态 :" prop="xiansuozhuangkuang">
            <el-select
              v-model="ruleForm.xiansuozhuangkuang"
              placeholder="请选择"
              style="width: 650px"
            >
              <el-option label="待分配" value="待分配"></el-option>
              <el-option label="已分配" value="已分配"></el-option>
              <el-option label="待跟进" value="待跟进"></el-option>
              <el-option label="已跟进" value="已跟进"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="意向车型 :" prop="yixiangchexing">
            <el-input v-model="ruleForm.yixiangchexing"></el-input>
          </el-form-item>
          <el-form-item label="跟进人 :" prop="genjinren">
            <el-input v-model="ruleForm.genjinren"></el-input>
          </el-form-item>
          <!-- 添加标签 -->
          <el-form-item label="添加标签 :" prop="dynamicTags">
            <el-tag
              :key="tag"
              v-for="tag in ruleForm.dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="ruleForm.inputVisible"
              v-model="ruleForm.inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >+添加标签</el-button
            >
          </el-form-item>

          <el-form-item label="跟进状态 :" prop="genjinzhuangtai">
            <el-select
              v-model="ruleForm.genjinzhuangtai"
              placeholder="请选择"
              style="width: 650px"
            >
              <el-option label="待跟进" value="待跟进"></el-option>
              <el-option label="已转换" value="已转换"></el-option>
              <el-option label="已跟进" value="已跟进"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注 :" prop="beizhu">
            <el-input type="textarea" v-model="ruleForm.beizhu"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >确定</el-button
            >
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
  
  <script>
import axios from "axios";
import { getChaClueList } from "@/api/index";
export default {
  name: "TianJia",
  data() {
    return {
      ruleForm: {
        name: "",
        region: "",
        xiansuolaiyuan: "",
        yixiangchexing: "",
        type: [],
        genjinren: "",
        xiansuozhuangkuang: "",
        beizhu: "",
        delivery: false,
        // 添加标签
        dynamicTags: [],
        inputVisible: false,
        inputValue: "",
        xiansuoguanbiyuanyin: "——",
        //编辑
        iseditor: false,
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [{ required: true, message: "请选择性别", trigger: "change" }],
        shoujihao: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        weixinhao: [
          {
            required: false,
            message: "请输入微信号",
            trigger: "blur",
          },
        ],
        xiansuolaiyuan: [
          { required: true, message: "请选择线索来源", trigger: "change" },
        ],
        xiansuozhuangtai: [
          { required: true, message: "请选择线索状态", trigger: "change" },
        ],
        yixiangchexing: [
          { required: true, message: "请输入车型", trigger: "change" },
        ],
        genjinren: [
          { required: true, message: "请输入跟进人", trigger: "blur" },
        ],
        xiansuozhuangkuang: [
          { required: true, message: "请选择跟进状态", trigger: "change" },
        ],
        beizhu: [{ required: false, message: "请输入", trigger: "blur" }],
      },

      // async getClueList() {
      //   const _data = await getClueList();
      //   // console.log(_data);
      //   this.tableData = _data.data;
      // },
      // getChaClueList(),
    };
  },
  methods: {

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios({
            method: "put",
            url: `http://localhost:3000/clueList/${this.$route.query.id}`,
            data: this.ruleForm,
          }).then((item) => {
            console.log(item);
          });
          this.$router.push("/clue");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push("/clue")
    },
    // 添加标签
    handleClose(tag) {
      this.ruleForm.dynamicTags.splice(this.ruleForm.dynamicTags.indexOf(tag));
    },

    showInput() {
      this.ruleForm.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.ruleForm.inputValue;
      if (inputValue) {
        this.ruleForm.dynamicTags.push(inputValue);
      }
      this.ruleForm.inputVisible = false;
      this.ruleForm.inputValue = "";
    },
  },
  mounted() {
    // console.log(this.$route.query.id);
    getChaClueList(this.$route.query.id).then((item) => {
      this.ruleForm = item.data[0];
    });
  },
};
</script>
  
  <style scoped>
.box {
  background-color: #fff;
  line-height: 0;
}
.tianjia {
  text-align: left;
  padding: 30px;
  width: 800px;
}
.box-tianjia {
  padding: 20px;
  margin: 10px 0 50px 0;
  font-size: 20px;
  font-weight: 600;
}
.biaodan {
  padding-left: 50px;
}
/* 添加标签 */
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>